<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers 天地图</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#map{width:100%;height:100%}input,b,p{margin-left:5px;font-size:14px}</style>
<script type="text/javascript">
   function init(){
            var layers=[
                    new ol.layer.Tile({
                         title: "天地图路网",
                         source: new ol.source.XYZ({
                             url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                         })
                  })
              ];
             var map=new ol.Map({
                  layers: layers,
                  target:'map',
                  view:new ol.View({
                      projection: 'EPSG:4326',
                      center:[116.40769, 39.89945],
                      zoom:9
                  }) ,
                controls: ol.control.defaults({
                    attributionOptions: {
                        collapsible: false
                        }
                    })
              });

          /*   var tian_di_tu_road_layer = new ol.layer.Tile({
                title: "天地图路网",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                })
            });
            map.addLayer(tian_di_tu_road_layer);  */

          /*   var tian_di_tu_satellite_layer = new ol.layer.Tile({
                title: "天地图卫星影像",
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
                })
            });
            map.addLayer(tian_di_tu_satellite_layer);*/

            var tian_di_tu_annotation = new ol.layer.Tile({
                title: "天地图文字标注",
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
                })
            });
            map.addLayer(tian_di_tu_annotation);

            var test =  new ol.layer.Tile({
                source:new ol.source.TileWMS({
                    url:'http://192.168.50.212:8080/geoserver/bj/wms',
                    params:{
                        'LAYERS':'bj_line',//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称
                        'TILED':false
                    },
                    serverType:'geoserver'    //服务器类型
                })
            });
            map.addLayer(test);
    }
    </script>
</head>
<body onload='init();'>
    <div id='map' style='width:100%;height:100%;'></div>
</body>
</html>